<template>
	<view class="py-3 px-2">
		<view class="content flex flex-column">
			<view class="item-power mb-3" v-for="(item,index) in list" v-if="list.length != 0" :key="index">
				<view class="p-2 top-box">
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">设备号</view>:
							</view>
							<view class="font-sm">{{item.device_number}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">品牌</view>:
							</view>
							<view class="font-sm">{{item.manufacturer_name}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">运营商</view>:
							</view>
							<view class="font-sm font-overflow">{{item.operator_name}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">运营商编码</view>:
							</view>
							<view class="font-sm">{{item.operator_code}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">地址</view>:
							</view>
							<view class="font-sm">{{item.city}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">具体位置</view>:
							</view>
							<view class="font-sm">{{item.address}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex align-center">
								<view class="title">经纬度</view>:
							</view>
							<view class="font-sm mr-3">经度 {{item.longitude}}</view>
							<view class="font-sm">纬度 {{item.latitude}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">种类</view>:
							</view>
							<view class="font-sm">{{item.kind_name}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">端口数量</view>:
							</view>
							<view class="font-sm">{{item.port}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">街道</view>:
							</view>
							<view class="font-sm">{{item.street}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">社区</view>:
							</view>
							<view class="font-sm">{{item.community}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">村庄</view>:
							</view>
							<view class="font-sm">{{item.village}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">安装日期</view>:
							</view>
							<view class="font-sm">{{item.installtime}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex">
								<view class="title">电表编码</view>:
							</view>
							<view class="font-sm">{{item.meter_code}}</view>
						</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="title-box mr-2 font flex" style="flex-shrink: 0;">
								<view class="title">拍照</view>:
							</view>
						</view>
					</view>
					<view class="flex px-2 flex-wrap align-center justify-between">
						<image class="img-box mb-2" v-for="(imgkey,imgIndex) in item.images" :key="imgIndex"
							v-if="item.images.length != 0" mode="aspectFit" :src="imgkey" @click.stop="lookImg(imgkey)">
						</image>
						<video class="img-box mb-2" v-for="(imgkey,imgIndex) in item.files" :key="imgIndex"
							v-if="item.files.length != 0" :src="imgkey" controls></video>
					</view>

				</view>
				<view class="py-2 px-2 flex justify-end" style="border-top: solid 1rpx rgb(245, 245, 245);">
					<view class="btn-clear" @click="jcBtn(item.id)">解除绑定</view>
				</view>
			</view>

			<view class="flex justify-center mt-5 font-lg" v-if="list.length == 0">暂无数据</view>
		</view>

		<view class="edit-btn" @click="navTo">添加充电桩</view>
	</view>
</template>

<script>
	import {
		postChargePileList,
		postDelChargePile
	} from "../../api/user.js";
	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			this.init()
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
		},
		methods: {
			async init() {
				var data = {};
				data.token = uni.getStorageSync('token')
				var res = await postChargePileList(data);
				uni.hideLoading()
				if (res.data.code == 1) {
					var list = res.data.data;
					list.forEach(item => {
						item.files != "" ? item.files = item.files.split(',') : item.files = [];
						item.images != "" ? item.images = item.images.split(',') : item.images = []
					})
					this.list = list;
				}
			},

			// 查看图片
			lookImg(url) {
				if (url != '') {
					uni.previewImage({
						current: url,
						urls: [url]
					})
				}
			},

			// 解除绑定
			jcBtn(id) {
				var self = this;
				uni.showModal({
					title: '解除绑定',
					content: '确定解除绑定吗？',
					success: async function(res) {
						if (res.confirm) {
							var data = {
								id: id
							}
							data.token = uni.getStorageSync('token')
							var value = await postDelChargePile(data);
							if (value.data.code == 1) {
								uni.showToast({
									title: "解除成功"
								})
								self.init()
							}
						}
					}
				});

			},

			navTo() {
				uni.navigateTo({
					url: "/pages/user/add-power"
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: rgb(245, 245, 245);
	}

	.item-power {
		background-color: #FFFFff;
		border-radius: 10rpx
	}

	.top-box>view {
		margin: 10rpx 0;
	}

	.title {
		width: 150rpx;
		text-align: justify;
		height: 40rpx;
	}

	.title::after {
		content: '';
		width: 100%;
		display: inline-block;
	}

	.btn-clear {
		background-color: #909399;
		color: #FFFFFF;
		padding: 9rpx 15rpx;
		border-radius: 8rpx;
		font-size: 30rpx;
	}

	.edit-btn {
		width: 350rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 40rpx;
		position: fixed;
		left: 50%;
		transform: translate(-50%);
		bottom: 100rpx;
	}

	.img-box {
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}

	.img-box image {
		width: 100%;
		height: 100%;
	}

	.img-box video {
		width: 100%;
		height: 100%;
	}
</style>
